<template>
  <div class="form-layout form-layout4">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor :itemList="[
        { name: 'box-base', title: '汇总信息' },
        { name: 'box-dtl', title: '汇总明细' }]" />
    </div>
    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="true">
        <template #content>
          <div id="box-base" class="box-title">汇总信息</div>
          <customFormItem label="医院" name="hospitalName" :parent="_self" :form="form" />
          <customFormItem label="品名" name="matrName" :parent="_self" :form="form" />
          <customFormItem label="品规" name="matrSpec" :parent="_self" :form="form" />
          <customFormItem label="厂商" name="mfgName" :parent="_self" :form="form" />
          <customFormItem label="数量" name="skuQty" :parent="_self" :form="form" />
          <customFormItem label="金额" name="amount" :parent="_self" :form="form" />

          <div id="box-dtl" class="box-title">汇总明细</div>
          <data-view
            propViewKey="dept_oprt_use_item"
            :propIsTdesign="true"
            ref="childDataView"
            :propAutoFetchData="false"
            :propSubHeight="130"
          />
        </template>
      </customForm>
    </div>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'


export default {
  help: '汇总-详情',
  data() {
    return {
      form: {},
    }
  },
  methods: {
    // 加载明细数据
    fetchChildData() {
      let queryWrapper = this.$newWrapper()
       queryWrapper.eq('hospitalId', this.form.hospitalId)
       queryWrapper.eq('matrName', this.form.matrName)
       queryWrapper.eq('matrSpec', this.form.matrSpec)
       queryWrapper.eq('mfgName', this.form.mfgName)
      this.$refs.childDataView.setQueryWrapper(queryWrapper)
    },
  },
  created() {
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData) => {
        this.form = global.utils.jsonClone(formData)
        this.$set(this.form, 'id', this.form.id)
        this.fetchChildData()
      },
      afterSave: () => {
      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {
      },
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {
      },
      beforeClose: () => {
        return true
      },
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object,
  },
  components: { customAnchor},
  computed: {
  },
}
</script>


<style lang="scss" scoped>
.form-layout4 .form-right {
  overflow-y: hidden;
}
</style>
